<template>
  <view class="coupon">
    <navbars
      title="云上农夫"
      urls="/pages/cart/index"
      types="switchTab"
      imgs="/static/cars.jpg"
    />
    <view class="ser">
      <navigator
        url="/pages/mine/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon size="30" name="/static/cx.jpg" class="ico"></u-icon>
      </navigator>
      <ugo-search class="sss" :keyword="keyword" />
    </view>
    <h4>新人选地券</h4>
    <view class="yhq">
      <text>【新人专享】平台选地券一张</text>
      <view class="yhq-rg">
        <text class="pir"><text>50</text>元</text>
        <text class="mz">满100元可用</text>
        <u-tag
          text="去使用"
          type="warning"
          color="#171616"
          bgColor="#FFD68D"
          borderColor="#FFD68D"
        ></u-tag>
      </view>
    </view>
  </view>
</template>

<script>
import UgoSearch from "../../components/ugo-search/ugo-search.vue";
export default {
  components: { UgoSearch },
  data: () => ({
    keyword: "亲子研学",
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {},
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.coupon {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .ser {
    display: flex;
    margin-bottom: 20rpx;
    navigator {
      margin-left: 3%;
      display: flex;
    }
    .sss {
      width: 80%;
    }
  }
  h4 {
    margin-left: 5%;
    font-weight: 600;
    color: #4a4543;
  }
  .yhq {
    width: 90%;
    margin: 20rpx auto;
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      top: 0;
      content: "新人";
      background-color: #f9efdd;
      color: #9b2f04;
      padding: 5rpx;
    }
    .yhq-rg {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .pir {
        color: #fc1414;
        text {
          font-size: 40rpx;
        }
      }
      .mz {
        margin: 4rpx 0;
        font-size: 24rpx;
        color: #414141;
      }
    }
  }
}
</style>